//初始化页面，将后端数据渲染到前端页面上
$(function (){
  console.log('这个页面的节点初始化完成');
  axios.get('http://localhost:3000/fruit').then(res => {
    let fruitData = res.data;
    show(fruitData.data);
  })
})
//渲染页面的处理函数，提供表格数据
function show(data){
  data.forEach(item => {
    let tb = $('table');
    let html = `
        <tr class="tr${item.id}">
            <td>${item.fruitName}</td>
            <td>${item.price}</td>
            <td>
              <input type="button" value="编辑" onclick="onPut(${item.id})">
              <input type="button" value="删除" onclick="onDel(${item.id})">
            </td>
        </tr>
    `//这里面不显示id，但是id数据还是在的，所以可以被引用
    tb.append(html);
  });
  //在第一列插入序号排列
  let tr = $('table tr');
  for(var i = 1;i<tr.length;i++){
    var cell = document.createElement('td');
    cell.textContent = i;
    tr[i].insertBefore(cell, tr[i].firstChild)
  }
}

//增加操作，挑转到新增页面
function onAdd(){
  location.href="./add.html"
}

//删除操作
/*
1.先锁定前端表格要删除行的id
2.后端api拿到id，进行删除操作
3.前端得到api响应，将表中数据删除
 */
function onDel(id){
  if(confirm('是否删除？')){
    axios.delete(`http://localhost:3000/fruit/${id}`).then(res => {
      let fruitData = res.data;
      //如果删除成功，前端移除对应行
      if(fruitData.code === 1000){
        let tr = $('.tr'+id);
        //移除
        tr.remove();
        //更新序号列，重新排序
        let newTr = $('table tr');
        for (let i = 1; i < newTr.length; i++) {
          // 更新每行第一个单元格的内容为新的序号
             newTr[i].cells[0].textContent = i;
        }
      }
      else if(fruitData.code === 4000){
        alert(fruitData.msg)
      }
    })
  }
}

//修改操作
function onPut(id){
    location.href = `./add.html?id=${id}`;
  }
  
//查询操作
/* 
1.前端拿到关键字，向后端api发请求
2.后端api拿到关键字，在数据库中查找符合条件的记录，最后返回记录列表
3.前端拿到api的响应，移除表格的行数据，重新使用api返回的列表渲染数据
*/
function onSearch(){
  let keyword = $('[name=keyword]').val();
  axios.get(`http://localhost:3000/fruit?keyword=${keyword}`).then(res => {
    let fruitData = res.data;
    if(fruitData.code === 1000){
      let tr = $('[class^=tr]');
      //移除全部行
      tr.remove();
      //渲染呈现后端查询的新数据
      show(fruitData.data);
    }
  })
}

